<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>弹幕demo页面</title>
	<link rel="Shortcut Icon" href="/static/index/img/favicon.ico">
  <script src='/static/index/js/jquery-3.4.1.min.js' type='text/javascript'></script>
  <script src='/static/index/js/layer/layer.js' type='text/javascript'></script>
  <style>
	  .dark-matter {
margin-left: auto;
margin-right: auto;
max-width: 500px;
background: #555;
padding: 20px 30px 20px 30px;
font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #D3D3D3;
text-shadow: 1px 1px 1px #444;
border: none;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.dark-matter h1 {
padding: 0px 0px 10px 40px;
display: block;
border-bottom: 1px solid #444;
margin: -10px -30px 30px -30px;
}
.dark-matter h1>span {
display: block;
font-size: 11px;
}
.dark-matter label {
display: block;
margin: 0px 0px 5px;
}
.dark-matter label>span {
float: left;
width: 20%;
text-align: right;
padding-right: 10px;
margin-top: 10px;
font-weight: bold;
}
.dark-matter input[type="text"], .dark-matter input[type="email"], .dark-matter textarea, .dark-matter select {
border: none;
color: #525252;
height: 25px;
line-height:15px;
margin-bottom: 16px;
margin-right: 6px;
margin-top: 2px;
outline: 0 none;
padding: 5px 0px 5px 5px;
width: 70%;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
background: #DFDFDF;
}
.dark-matter select {
background: #DFDFDF url('down-arrow.png') no-repeat right;
background: #DFDFDF url('down-arrow.png') no-repeat right;
appearance:none;
-webkit-appearance:none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
width: 70%;
height: 35px;
color: #525252;
line-height: 25px;
}
.dark-matter textarea{
height:100px;
padding: 5px 0px 0px 5px;
width: 70%;
}
.dark-matter .button {
background: #FFCC02;
border: none;
padding: 10px 25px 10px 25px;
color: #585858;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
text-shadow: 1px 1px 1px #FFE477;
font-weight: bold;
box-shadow: 1px 1px 1px #3D3D3D;
-webkit-box-shadow:1px 1px 1px #3D3D3D;
-moz-box-shadow:1px 1px 1px #3D3D3D;
}
.dark-matter .button:hover {
color: #333;
background-color: #EBEBEB;
}
  </style>
  </head>
	<body>
		<form action="" method="post" class="dark-matter">
			<h1>弹幕demo页面</span>
			</h1>
			<label>
			<span>内容 :</span>
			<input id="content" type="text" name="content" />
			</label>
			<label>
				<span>&nbsp;</span>
				<input type="button" class="button" value="发送" id="sendButton" />
				</label>
			<label>
			<span>显示 :</span>
			<div id="msgList" style="height: 200px;width: 400px;word-wrap: break-word;">
			
			</div>
			</label>
			</form>
	</body>
</html>
<script>
$(function() {
	var ws = new WebSocket('ws://127.0.0.1:8098/test/ws');
	ws.onopen = function(event){
        console.log(event);
        alert('连接了');
    };
	ws.onmessage = function(e) {
		var title = $('#msgList').text();
		title += "<br>" + event.data
		$('#msgList').text(title).appendTo($ul);

	};
	ws.onclose = function(event){alert("已经与服务器断开连接\r\n当前连接状态："+this.readyState);};
    ws.onerror = function(event){alert("WebSocket异常！");};
	var $ul = $('#msgList');

	$("#sendButton").click(function() {
        ws.send($("#content").val());
    });
});
</script>